<template>
  <div class="top">
    <div class="left">
      <el-button type="success" @click="goHome" plain>首页</el-button>
    </div>
    <div class="city">
      全&nbsp;国&nbsp;旅&nbsp;游&nbsp;数&nbsp;据&nbsp;大&nbsp;屏
    </div>
    <div class="time">当前时间:{{ timer }}</div>
  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import moment from 'moment'
//点击首页按钮回到首页
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'


//获取路由器对象
let $router = useRouter()

//存储当前时间
let timer = ref('')


//按钮的点击回调
const goHome = () => {
  $router.push('/home')
}
//组件挂载完毕更新当前的事件
onMounted(() => {
  getCurrentDateTime()
  // 每秒更新一次日期时间
  setInterval(getCurrentDateTime, 1000)
})

const getCurrentDateTime = () => {
  const now = new Date()

  const year = now.getFullYear()
  const month = (now.getMonth() + 1).toString().padStart(2, '0')
  const day = now.getDate().toString().padStart(2, '0')

  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  const seconds = now.getSeconds().toString().padStart(2, '0')

  timer.value = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
}

const emit = defineEmits(['getdata'])

</script>

<style scoped>
.top {
  width: 100%;
  height: 80px;
  /* background-color: #666; */
  display: flex;
  /* justify-content: center; */
  align-items: center;

  .left {
    padding-left: 30%;
    padding-top: 0px;
  }
  .city {
    line-height: 80px;
    border-radius: 15px;
    font-size: 30px;
    padding-left: 25px;
    margin-left: 25px;

    padding-right: 25px;
  }
  .time {
    padding-top: 25px;
    padding-left: 60px;
  }
}
</style>
